<script lang="ts" setup>
import WantMovies from "@/components/want/WantMoviesComponents.vue";
import WantPlay from "@/components/want/WantPlayComponents.vue";
import { ref } from 'vue';
import { wantStore } from '../stores/want'

const active = ref(0)
const navActive = ref(0)
const wantPinias = wantStore()

const changeNav = (n:number) => {
    navActive.value = n
}
</script>

<template>
    <div class="want-view">
        <div class="want-top">
            <img src="../assets/imgs/mine/left.png" @click="$router.go(-1)">
            <div class="want-nav">
                <div :class="{active: navActive === 0}" @click="changeNav(0)">想看</div>
                <div :class="{active: navActive === 1}" @click="changeNav(1)">看过</div>
            </div>
            <div>编辑</div>
        </div>
        <div class="want-tab">
            <van-tabs v-model:active="active" color="#ee3e33">
                <van-tab title="电影">
                    <div class="line"></div>
                    <div v-show="navActive === 0">
                        <div class="nothing" v-if="!wantPinias.wantMoviesList[0]">
                            <img src="../assets/imgs/play/nothing.png">
                            <div>空空如也</div>
                        </div>
                        
                        <div class="want-movies" v-if="wantPinias.wantMoviesList[0]">
                            <WantMovies v-for="w in wantPinias.wantMoviesList" :wList="w"/>
                        </div>
                    </div>
                    <div v-show="navActive === 1">
                        <div class="nothing">
                            <img src="../assets/imgs/play/nothing.png">
                            <div>空空如也</div>
                        </div>

                    </div>
                </van-tab>
                <van-tab title="电视剧">
                    <div class="line"></div>

                    <div class="nothing">
                        <img src="../assets/imgs/play/nothing.png">
                        <div>空空如也</div>
                    </div>
                  
                </van-tab>
                <van-tab title="演出">
                    <div class="line"></div>
                    <div v-show="navActive === 0">
                        <div class="nothing" v-if="!wantPinias.wantPlaysList[0]">
                            <img src="../assets/imgs/play/nothing.png">
                            <div>空空如也</div>
                        </div>

                        <WantPlay v-for="p in wantPinias.wantPlaysList" :pList="p" />
                    </div>
                    <div v-show="navActive === 1">
                        <div class="nothing">
                            <img src="../assets/imgs/play/nothing.png">
                            <div>空空如也</div>
                        </div>

                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.want-view{

    .want-top{
        color: #ee3e33;
        font-size: 14px;
        width: 100vw;
        padding:4vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        
        img{
            width: 6vw;
        }
        .want-nav{
            color: #333;
            width: 34vw;
            height: 8vw;
            line-height: 8vw;
            border-radius: 2vw;
            border: #f9f9f9 2px solid;
            background-color: #f9f9f9;
            display: flex;

            div{
                width: 50%;
                text-align: center;


                &.active{
                    font-weight: bold;
                    background-color: #ffffff;
                    border-radius: 2vw;
                }
            }
        }
    }
    .want-tab{

        .nothing{
            color: #999;
            font-size: 14px;
            text-align: center;
            padding-top: 20vh;

            img{
                width: 20vw;
            }
        }
        .line{
            width: 100vw;
            height: 1px;
            background-color: #e7e7e7;
        }
    }
}
</style>